
<template>
  <div>
    <div class="user">
      <van-nav-bar title="航旅问问" left-arrow @click-left="onClickLeft" />
      <van-tabs>
        <div v-for="(item,index) in info_list" :key="index">
          <van-tab :title="item.title">
            <div class="list" v-for="(v,i) in item.details" :key="i">
              <div class="listLeft">
                <p class="word">{{ v.word }}</p>
              </div>
              <div class="listRight">
                <p class="glt">></p>
              </div>
            </div>
          </van-tab>
        </div>
      </van-tabs>
    </div>
    
    <div class="problem">
      <input v-model="problem" type="text" placeholder="请输入您的问题"/>
      <van-icon name="chat" @click="submit" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'accountInfo',
  data(){
    return{
      info_list:[
        {id:1,path:'/index',title:'相关规定',details:[{id:11,path:'/index',word:'各航司手提行李限额是多少'}, {id:12,path:'/index',word:'各航司托运行李限额是多少'}, {id:13,path:'/index',word:'机场大巴时刻表'}, {id:14,path:'/index',word:'停车场信息查询'}, {id:15,path:'/index',word:'乘飞机如何中转'}]},
        {id:2,path:'/index',title:'民航百科',details:[{id:21,path:'/index',word:'哪家航司最大'}, {id:22,path:'/index',word:'CA是哪家航空公司的代码'}, {id:23,path:'/index',word:'什么是航班超售'}, {id:24,path:'/index',word:'通航城市最多的机场'}, {id:25,path:'/index',word:'中国共有多少个机场'}]},
        {id:3,path:'/index',title:'常见问题',details:[{id:31,path:'/index',word:'行程单和发票的区别'}, {id:32,path:'/index',word:'航班动态查询'}, {id:33,path:'/index',word:'乘飞机需要携带户口本嘛'}, {id:34,path:'/index',word:'停车场信息查询'}, {id:35,path:'/index',word:'怎么使用电子登机牌乘机'}]},
      ],
      problem:''
    }
  },
  created(){

  },
  methods:{
    onClickLeft(){
      this.$router.go(-1)
    },
    submit(){
      this.$message({
          message: '发送成功',
          type: 'success'
        });
      this.problem = ''
    }
  }
} 
</script>

<style scoped>
.user{
    width: 330px;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
}
.list{
  width: 310px;
  height: 45px;
  padding: 0 10px;
  line-height: 45px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1PX solid #d2d2d2;
}
.list .word{
  font-size: 14px;
  margin: 0;
}
.listLeft,.listRight{
  display: flex;
}
.glt{
  color: #a2a2a2;
  margin: 0 0 0 10px;
}
.van-tabs .van-tabs__nav .van-tab{
  background-color: #f5f6f8!important;
}
.problem{
  position: fixed;
  bottom: 10px;
  width: 355px;
  height: 60px;
  /* border: 1px solid black; */
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.problem input{
  width: 275px;
  background-color: #f5f6f8;
  border-radius: 20px;
  height: 40px;
  margin: 10px 0 10px 10px;
  border: none;
  padding-left: 20px;
}
.van-icon{
  font-size: 12px;
  color: #cccccc;
  font-size: 40px;
  margin-top: 10px;
}
</style>
